<template>
    <div>

<van-form @submit="onSubmit">

  来访目的
  <van-radio-group v-model="radio" direction="horizontal">
  <van-radio name="1">送货上门</van-radio>
  <van-radio name="2">搬家旅游</van-radio>
  <van-radio name="3">朋友来访</van-radio>
</van-radio-group>

  <van-field
    v-model="carnum"
    name="预约车牌号"
    label="预约车牌号"
    placeholder="预约车牌号"
    :rules="[{ required: true, message: '请填写车牌号！' }]"
  />

  <van-field
  readonly
  clickable
  label="车型"
  :value="models"
  placeholder="请选择车型"
  @click="showPicker = true"
/>

<van-popup v-model="showPicker" round position="bottom">
  <van-picker
    show-toolbar
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm1"
  />
</van-popup>

  <van-field
    v-model="name"
    name="预约人"
    label="预约人"
    placeholder="预约人"
    :rules="[{ required: true, message: '请填写预约人' }]"
  />

 <van-field
    v-model="tel"
    name="手机号"
    label="手机号"
    placeholder="手机号"
    :rules="[{ required: true, message: '请填写手机号' }]"
  />

<van-cell title="来访日期" :value="date" @click="show = true" />
<van-calendar v-model="show" @confirm="onConfirm" />

  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div>
</van-form>



    </div>
</template>
<script>
export default {
  data() {
    return {
     
      show: false,
      name: '',
      date: '',
      tel:'',
      models:'',
      carnum: '',
      value: '',
      showPicker: false,
      columns: ['大车', '小车', '摩托车'],
      radio: '1',
    };
  },
  methods: {
    onConfirm1(models) {
      this.models = models;
      this.showPicker = false;
    },onSubmit(values) {


      this.$axios
      .post('visitors/addVisitors',{
        carnum: this.carnum,
        models: this.models,
        name: this.name,
        date: this.date,
        tel: this.tel,
        radio: this.radio

      })
      .then(res=>
      {
        console.log(res);
      alert("预约成功");

      // localStorage.setItem("carnum",this.carnum)
       this.$router.push("/parkspace"); 
      }).catch(error =>{
        console.log(error);
      });

    

      console.log('submit', values);
    }, formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    }
  },
  
};
</script>

